<template>
  <div class="useRecord" v-loading="loading">
    <hr>
    <el-table :data="tableData">
      <el-table-column label="会员昵称" prop="nickname" align="center"></el-table-column>
      <el-table-column label="使用时间" prop="createTime" align="center"></el-table-column>
      <el-table-column label="消费项目" align="center">
        <template slot-scope="scope">
          {{ scope.row.cardType | typeFilter }}
        </template>
      </el-table-column>
      <el-table-column label="实际支付(元)" prop="paidAmount" align="center"></el-table-column>
    </el-table>

    <el-pagination
      :hide-on-single-page="false"
      :current-page="seachData.pageNum"
      :page-sizes="[10, 15, 20, 30]"
      :page-size="seachData.pageSize"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      align="center"
      style="margin-top:30px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

  </div>
</template>

<script>

  export default {
    name: 'useRecord',
    props: ['id'],
	filters: {
		typeFilter(type) {
			switch(type) {
				case "1":
					return '月租卡';
				case "2":
					return '定制卡';
				case "3":
					return '时长卡';
				case "4":
					return '充值';
				case "100":
					return '白天卡';
				case "110":
					return '夜间卡';
			}
		}
	},
    data() {
      return {
        seachData: {
          pageNum: 1,
          pageSize: 10
        },
        total: null,
        tableData: [],
        loading: true
      }
    },
    mounted() {
      this.seachData.ticketId = this.id;
      this.getTableData();
    },
    methods: {
      getTableData() {
        this.$axios({
          method: 'get',
          url: '/customer/card-record/getCardRecordList',
          params: this.seachData
        }).then((res) => {
          this.tableData = res.data.records;
          this.total = res.data.total;
          this.loading = false;
        })
      },
      
      // 分页修改每页显示条数
      handleSizeChange(val) {
        this.searchData.pageSize = val;
        this.getTableData();
      },
      // 分页跳转页面
      handleCurrentChange(val) {
        this.searchData.pageNum = val;
        this.getTableData();
      }
    }
  }
</script>

<style scoped>
  hr {
    margin-top: -24px;
  }

</style>
